<template>
  <el-container class="friend-page">
    <FriendList @onActiveItem="onActiveItem"></FriendList>
    <el-container class="container">
      <div class="header" v-show="userInfo.id">
        {{ userInfo.nickName }}
      </div>
      <div v-show="userInfo.id">
        <div class="friend-info">
          <HeadImage
            :size="160"
            :name="userInfo.nickName"
            :url="userInfo.headImage"
            radius="10%"
            @click.native="showFullImage()"
          ></HeadImage>
          <div style="flex: 1">
            <div class="info-item">
              <el-descriptions title="好友信息" class="description" :column="1">
                <el-descriptions-item label="用户名"
                  >{{ userInfo.userName }}
                </el-descriptions-item>
                <el-descriptions-item label="昵称"
                  >{{ userInfo.nickName }}
                </el-descriptions-item>
                <el-descriptions-item label="性别">{{
                  userInfo.sex == 0 ? "男" : "女"
                }}</el-descriptions-item>
                <el-descriptions-item label="签名">{{
                  userInfo.signature
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="btn-group">
              <el-button
                v-show="isFriend"
                :icon="Position"
                type="primary"
                @click="onSendMessage(userInfo)"
                >发消息</el-button
              >
              <el-button
                v-show="!isFriend"
                :icon="Plus"
                type="primary"
                @click="onAddFriend(userInfo)"
                >加为好友</el-button
              >
              <el-button
                v-show="isFriend"
                :icon="Delete"
                type="danger"
                @click="onDelFriend(userInfo)"
                >删除好友</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import axios from "@/utils/request";
import { ElMessageBox } from "element-plus";
import { Plus, Position, Delete } from "@element-plus/icons-vue";
const chatStore = {} as any;
let userInfo: any = ref({ id: "" });
const isFriend = computed(() => {
  return true;
});
function onActiveItem(friend: any) {
  let id = friend.id;
  // 获取好友用户信息
  userInfo.value = friend;
  console.log(userInfo);
}

function onSendMessage(user: any) {
  let chat = {
    type: "PRIVATE",
    targetId: user.id,
    showName: user.nickName,
    headImage: user.headImageThumb,
  };
  chatStore.openChat(chat);
  chatStore.setActiveChat(0);
  // $router.push("/home/chat");
}
function onDelFriend(friend: any) {
  ElMessageBox.confirm(
    `确认删除'${friend.nickName}',并清空聊天记录吗?`,
    "确认解除?",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(() => {
    // this.$http({
    //   url: `/friend/delete/${friend.id}`,
    //   method: "delete",
    // }).then(() => {
    //   this.$message.success("删除好友成功");
    //   this.friendStore.removeFriend(friend.id);
    //   this.chatStore.removePrivateChat(friend.id);
    // });
  });
}

function onAddFriend(user: any) {}

function showFullImage() {
  if (userInfo.headImage) {
    // this.$eventBus.$emit("openFullImage", this.userInfo.headImage);
  }
}
</script>

<style lang="scss" scoped>
.friend-page {
  .container {
    display: flex;
    flex-direction: column;

    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px;
      font-size: var(--im-font-size-larger);
      border-bottom: var(--im-border);
      box-sizing: border-box;
    }

    .friend-info {
      display: flex;
      padding: 50px 80px 20px 80px;
      text-align: center;

      .info-item {
        margin-left: 20px;
        background-color: #ffffff;
        border: 1px #ddd solid;
      }

      .description {
        padding: 20px 20px 0 20px;
      }
    }

    .btn-group {
      text-align: left !important;
      padding: 20px;
    }
  }
}
</style>
